<template>
  <div v-if="info">
    <el-card class="info-box" shadow="hover">
      <template #header>
        <div class="list-title">{{ title }}</div>
      </template>
      <div class="content">
        <h1 class="con-tilte">{{ info.name }}</h1>
        <div class="con-header">
          <div class="con-header-time">发布时间：{{ info.date_value }}</div>
          <div class="con-header-weig">{{ info.visits }}人已围观</div>
          <div class="con-header-tag" v-if="info.label_to.length">
            <el-tag
              v-for="(item, index) in info.label_to"
              :type="tagTypeList[index % 4]"
              :key="index"
              effect="dark"
              >{{ item.name }}</el-tag
            >
          </div>
        </div>
        <div class="con-info-description" v-if="info.description"
          ><b>简介</b> {{ info.description }}</div
        >
        <div v-html="info.content" class="con-text"></div>
      </div>
    </el-card>
  </div>
  <Empty v-else />
</template>
<script lang="ts" setup>
import { articleList } from '@/api/articleList';
import { articleDetails } from '@/api/articleDetails';
const tagTypeList: any = ['success', 'info', 'warning', 'danger'];
const route = useRoute();
const articleType = useArticleType();
const identification: any = route.params.identification;
const typeIndexArr = identification.replace('.html', '').split('-');
let title = '';
let article_type_id = '';
let info: any = null;
if (articleType.value[typeIndexArr[0]].name) {
  title = articleType.value[typeIndexArr[0]].name;

  article_type_id = articleType.value[typeIndexArr[0]].id;
}
if (typeIndexArr[1] && articleType.value[typeIndexArr[0]].children[typeIndexArr[1]].name) {
  title += '-' + articleType.value[typeIndexArr[0]].children[typeIndexArr[1]].name;
  article_type_id = articleType.value[typeIndexArr[0]].children[typeIndexArr[1]].id;
}
const listRes = await articleList({ article_type_id: article_type_id, limit: 1 });
if (listRes.status === 20000) {
  if (listRes.data.list.length && listRes.data.list[0].id > 0) {
    const articleDetailsRes = await articleDetails({ id: listRes.data.list[0].id });
    if (articleDetailsRes.status === 20000) {
      info = articleDetailsRes.data;
    }
  }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
<style>
p {
  margin-bottom: 1rem !important;
}
</style>
